<template>
<el-dialog
    v-model="dialogVisible"
    title="字符选择器"
    width="600px"
    >
    <CharacterSelector
        :key="`character-selector-${instanceId}`"
        ref="dialogCharSelectorRef"
        @character-selected="onCharacterSelected"
    />
    <template #footer>
        <span class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
        </span>
    </template>
</el-dialog>
</template>
<script setup>
import { ref } from 'vue'
import CharacterSelector from './characterSelector/character-selector.vue'
const instanceId = Math.random()
const emit = defineEmits(['character-selected'])

const dialogVisible = ref(false)
const dialogCharSelectorRef = ref()

// 显式定义方法
const openDialog = () => {
  dialogVisible.value = true
  if (dialogCharSelectorRef.value) {
    dialogCharSelectorRef.value.clearSelection()
  }
}

const closeDialog = () => {
  dialogVisible.value = false
}

const onCharacterSelected = (char) => {
  emit('character-selected', char)
}

// 显式定义获取选中字符的方法
const getSelectedChars = () => {
  if (dialogCharSelectorRef.value) {
    return dialogCharSelectorRef.value.getSelectedChars()
  }
  return ''
}

// 明确暴露所有方法
defineExpose({
  openDialog,
  closeDialog,
  getSelectedChars
})
</script>